<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帮助中心 - UserHub</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        success: '#10B981',
                        dark: '#1F2937',
                        neutral: '#F3F4F6'
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <link rel="stylesheet" href="help-center.css">
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和导航 -->
                <div class="flex items-center">
                    <div class="flex-shrink-0 flex items-center">
                        <i class="fa fa-connectdevelop text-primary text-2xl mr-2"></i>
                        <span class="font-bold text-xl text-primary">UserHub</span>
                    </div>
                    <nav class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="dashboard.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            首页
                        </a>
                        <a href="messages.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            消息
                        </a>
                        <a href="tasks.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            任务
                        </a>
                        <a href="settings-profile.html" class="text-gray-500 hover:text-primary hover:border-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium transition-colors duration-200">
                            设置
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧用户区域 -->
                <div class="flex items-center">
                    <!-- 用户菜单 -->
                    <div class="ml-3 relative">
                <div>
                    <button type="button" class="flex items-center max-w-xs rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" id="user-menu-button">
                        <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/id/64/200/200" alt="用户头像" id="header-avatar">
                        <span class="ml-2 hidden md:block text-sm font-medium text-gray-700" id="user-display-name">张三</span>
                        <i class="fa fa-chevron-down ml-1 text-xs text-gray-500"></i>
                    </button>
                </div>
            </div>
            <!-- 下拉菜单 (默认隐藏) -->
                        <div class="user-menu-dropdown hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50" id="user-menu-dropdown">
                            <div class="py-1">
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-profile.html'">
                                    <i class="fa fa-user-circle mr-2"></i>个人资料
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-security.html'">
                                    <i class="fa fa-lock mr-2"></i>账户安全
                                </button>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" onclick="window.location.href='settings-notifications.html'">
                                    <i class="fa fa-bell mr-2"></i>通知设置
                                </button>
                                <div class="border-t border-gray-100 my-1"></div>
                                <button class="user-menu-item w-full text-left px-4 py-2 text-sm text-red-500 hover:bg-gray-100" id="logout-button">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </button>
                            </div>
                        </div>
            
                    <!-- 移动端菜单按钮 -->
                    <button type="button" class="ml-4 inline-flex items-center justify-center p-2 rounded-md text-gray-500 hover:text-primary hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary md:hidden" id="mobile-menu-button">
                        <span class="sr-only">打开主菜单</span>
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="hidden md:hidden" id="mobile-menu">
            <div class="pt-2 pb-3 space-y-1">
                <a href="dashboard.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    首页
                </a>
                <a href="messages.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    消息
                </a>
                <a href="tasks.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    任务
                </a>
                <a href="settings-profile.html" class="text-gray-500 hover:bg-gray-50 hover:text-primary hover:border-primary block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium">
                    设置
                </a>
            </div>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题 -->
        <div class="mb-8 text-center">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">帮助中心</h1>
            <p class="text-gray-500 mt-2 max-w-2xl mx-auto">
                查找常见问题的答案，或联系我们获取更多帮助
            </p>
        </div>
        
        <!-- 搜索框 -->
        <div class="max-w-2xl mx-auto mb-6">
            <div class="relative">
                <input type="text" placeholder="搜索帮助文章..." 
                       class="w-full px-4 py-3 pl-10 pr-12 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all"
                       id="search-input">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <button id="clear-search" class="hidden absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                    <i class="fa fa-times"></i>
                </button>
                <button id="search-button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                    <i class="fa fa-arrow-right"></i>
                </button>
            </div>
        </div>
        
        <!-- 搜索结果区域 -->
        <div id="search-results" class="max-w-3xl mx-auto mb-12 hidden">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-lg font-semibold" id="results-heading">搜索结果</h2>
                <button id="close-results" class="text-gray-500 hover:text-primary text-sm">
                    <i class="fa fa-times mr-1"></i> 关闭
                </button>
            </div>
            
            <div id="results-container" class="bg-white rounded-xl shadow-sm p-6">
                <!-- 搜索结果将在这里动态显示 -->
            </div>
        </div>
        
        <!-- 帮助分类 - 默认显示，搜索时有条件隐藏 -->
        <div id="help-categories" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
            <!-- 账户相关 -->
            <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                    <i class="fa fa-user-circle text-xl"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">账户管理</h3>
                <p class="text-gray-500 text-sm mb-4">关于账户注册、登录和个人信息管理的常见问题</p>
                <ul class="space-y-2">
                    <li><a href="help-account.html#register" class="text-primary hover:underline text-sm">如何注册新账户？</a></li>
                    <li><a href="help-account.html#password" class="text-primary hover:underline text-sm">忘记密码怎么办？</a></li>
                    <li><a href="help-account.html#profile" class="text-primary hover:underline text-sm">如何修改个人资料？</a></li>
                    <li><a href="help-account.html#delete" class="text-primary hover:underline text-sm">如何注销账户？</a></li>
                </ul>
            </div>
            
            <!-- 任务管理 -->
            <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                    <i class="fa fa-tasks text-xl"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">任务管理</h3>
                <p class="text-gray-500 text-sm mb-4">关于创建、编辑和管理任务的常见问题</p>
                <ul class="space-y-2">
                  <li><a href="help-account2.html" class="text-primary hover:underline text-sm">如何创建新任务？</a></li>
                  <li><a href="help-account2.html" class="text-primary hover:underline text-sm">如何设置任务提醒？</a></li>
                  <li><a href="help-account2.html" class="text-primary hover:underline text-sm">如何分享任务给他人？</a></li>
                  <li><a href="help-account2.html" class="text-primary hover:underline text-sm">如何筛选和排序任务？</a></li>
                </ul>
            </div>
            
            <!-- 消息通知 -->
            <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                    <i class="fa fa-comments text-xl"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">消息与通知</h3>
                <p class="text-gray-500 text-sm mb-4">关于消息发送、接收和通知设置的常见问题</p>
                <ul class="space-y-2">
                    <li><a href="messages.html" class="text-primary hover:underline text-sm">如何发送消息给其他用户？</a></li>
                    <li><a href="settings-notifications.html" class="text-primary hover:underline text-sm">如何设置通知偏好？</a></li>
                </ul>
            </div>
            
            <!-- 集成服务 -->
            <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                    <i class="fa fa-plug text-xl"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">集成服务</h3>
                <p class="text-gray-500 text-sm mb-4">关于第三方服务集成的常见问题</p>
                <ul class="space-y-2">
                    <li><a href="settings-integrations.html#google" class="text-primary hover:underline text-sm">如何连接Google账户？</a></li>
                    <li><a href="settings-integrations.html" class="text-primary hover:underline text-sm">支持哪些第三方服务？</a></li>
                    <li><a href="settings-integrations.html#disconnect" class="text-primary hover:underline text-sm">如何断开集成服务？</a></li>
                    <li><a href="help-center.html#integration-permissions" class="text-primary hover:underline text-sm">集成服务权限说明</a></li>
                </ul>
            </div>
            
            <!-- 常见问题 -->
            <div class="bg-white rounded-xl shadow-sm p-6 hover:shadow-md transition-shadow">
                <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-4">
                    <i class="fa fa-question-circle text-xl"></i>
                </div>
                <h3 class="text-lg font-semibold mb-2">常见问题</h3>
                <p class="text-gray-500 text-sm mb-4">使用过程中最常遇到的问题及解决方案</p>
                <ul class="space-y-2">
                    <li><class="text-primary hover:underline text-sm>计费相关问题</li>
                    <li><class="text-primary hover:underline text-sm>安全与隐私</li>
                    <li><class="text-primary hover:underline text-sm>性能与稳定性</li>
                </ul>
            </div>
        </div>
        
        <!-- 联系支持 -->
        <div class="bg-white rounded-xl shadow-sm p-6 md:p-8 mb-12">
            <h2 class="text-xl font-bold mb-6">需要更多帮助？</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-envelope"></i>
                    </div>
                    <div class="ml-4">
                        <h4 class="text-sm font-medium">电子邮件</h4>
                        <p class="text-sm text-gray-600 mt-1">2659350014@qq.com</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-phone"></i>
                    </div>
                    <div class="ml-4">
                        <h4 class="text-sm font-medium">电话支持</h4>
                        <p class="text-sm text-gray-600 mt-1">6666666666666</p>
                        <p class="text-xs text-gray-500 mt-1">工作日 9:00-18:00</p>
                    </div>
                </div>
                
                <div class="flex items-start">
                    <div class="flex-shrink-0 w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-comments"></i>
                    </div>
                    <div class="ml-4">
                        <h4 class="text-sm font-medium">在线客服</h4>
                        <p class="text-sm text-gray-600 mt-1">工作日 9:00-21:00</p>
                        <p class="text-sm text-gray-600">周末 10:00-18:00</p>
                    </div>
                </div>
            </div>
            
            <div>
                <h3 class="text-lg font-medium mb-4">发送消息</h3>
                <form>
                    <div class="mb-4">
                        <label for="help-subject" class="block text-sm font-medium text-gray-700 mb-1">主题</label>
                        <input type="text" id="help-subject" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
                    </div>
                    
                    <div class="mb-4">
                        <label for="help-message" class="block text-sm font-medium text-gray-700 mb-1">消息内容</label>
                        <textarea id="help-message" rows="4" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"></textarea>
                    </div>
                    
                    <button type="button" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors">
                        发送消息
                    </button>
                </form>
            </div>
        </div>
    </main>

    <script src="help-center.js"></script>
</body>
</html>
